<template>
	<view class="bg-gray1" style="min-height: 100vh;">
		<cu-custom :bgColor="'bg-'+theme.backgroundColor" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">订单列表</block>
		</cu-custom>
		<view class="top_nav" :style="{ top: `${CustomBar}px` }">
			<view class="nav1">
				<view :class="'cu-item1 ' + (index == tabCur1 ? 'active1':'')" v-for="(item, index) in orderStatus1"
					:key="index" @click="tabSelect1(item,index)">
					{{item.value}}
				</view>
			</view>
			<view class="nav2">
				<view :class="'cu-item2 ' + (index == tabCur2 ? 'active2':'')" v-for="(item, index) in orderStatus2"
					:key="index" @click="tabSelect2(item,index)">
					{{item.value}}
				</view>
			</view>
		</view>
		<!-- 商城订单 -->
		<view class="order">
			<view v-for="(item,index) in orderList" :key="index" class="order_info" @click="jumpInfo(item.order)">
				<view class="flex">
					<image :src="item.itemList&&item.itemList[0].picUrl?item.itemList[0].picUrl:noPic" mode=""
						class="o_Img"></image>
					<view class="order_item">
						<view class="">
							<view class="text-black font-30 text-bold overflow-1">{{item.name}}</view>
							<view class="margin-top-sm">
								<text class="text-gray3">店铺名称：</text>
								<text>{{item.shop.shopName}}</text>
							</view>
							<view class="margin-top-sm">
								<text class="text-gray3">创建时间：</text>
								<text>{{item.order.createTime}}</text>
							</view>
						</view>
						<view class="flex align-center">
							<view class="order_status1"
								v-if="item.order&&(item.order.status == '1' || item.order.status == '2')">已付款</view>
							<view class="order_status2" v-if="item.order&&item.order.status == '3'">已完成</view>
							<view class="order_status3" v-if="item.order&&item.order.status == '-1'">已退款</view>
							<view class="margin-left-xs" v-if="item.itemList&&item.order&&item.order.status != '-1'">
								<view v-if="item.itemList[0].status=='1'" class="cu-tag round line-red">退款申请中</view>
								<view v-if="item.itemList[0].status=='12'" class="cu-tag round line-brown">拒绝退款</view>
								<view v-if="item.itemList[0].status=='2'" class="cu-tag round line-red">退货退款申请中</view>
								<view v-if="item.itemList[0].status=='21'" class="cu-tag round line-red">同意退货退款/退货中
								</view>
								<view v-if="item.itemList[0].status=='22'" class="cu-tag round line-brown">拒绝退货退款</view>
								<view v-if="item.itemList[0].status=='212'" class="cu-tag round line-brown">收到退货拒绝退款
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="flex justify-between">
					<view class="">
						<view class="margin-top">
							<view>付款金额(元)</view>
							<view class="text-black text-bold font-36 margin-top-sm">
								{{item.order.paymentPrice? item.order.paymentPrice.toFixed(2):'0.00'}}
							</view>
						</view>
						<view class="margin-top">
							<view>结算金额(元)</view>
							<view class="text-black text-bold font-36 margin-top-sm">
								{{item.order.paymentPrice? item.order.paymentPrice.toFixed(2):'0.00'}}
							</view>
						</view>
					</view>
					<view class="">
						<view class="margin-top">
							<view>付款预估收入(元)</view>
							<view class="flex-row-center margin-top-sm">
								<view class="text-black text-bold font-36">
									{{item.share.amount ? item.share.amount.toFixed(2): '0.00'}}
								</view>
								<view class="yBtn">佣金</view>
							</view>
						</view>
						<view class="margin-top">
							<view>付款结算预估收入(元)</view>
							<view class="flex-row-center margin-top-sm">
								<view class="text-black text-bold font-36">
									{{item.share.amount ? item.share.amount.toFixed(2): '0.00'}}
								</view>
								<view class="yBtn">佣金</view>
							</view>
						</view>
					</view>
					<view class="">
						<view class="margin-top">
							<view>总提成率</view>
							<view class="text-black text-bold font-36 margin-top-sm">
								<text
									v-if="item.share.amount&&item.order.paymentPrice">{{(item.share.amount/item.order.paymentPrice*100).toFixed(2)}}%</text>
								<text v-else>'0%'</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view :class="'cu-load bg-gray1 ' + (loadmore?'loading':'over')"></view>
	</view>
</template>

<script>
	const util = require("utils/util.js");
	const app = getApp();
	import api from 'utils/api'

	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				theme: app.globalData.theme, //全局颜色变量
				noPic: app.globalData.noPic,
				tabCur1: 0,
				orderStatus1: [{
					value: '全部订单',
					key: '0'
				}, {
					value: '推广订单',
					key: '1'
				}, {
					value: '自购订单',
					key: '2'
				}],
				tabCur2: 0,
				orderStatus2: [{
					value: '已付款',
					key: '0'
				}, {
					value: '已完成',
					key: '1'
				}, {
					value: '已退款',
					key: '2'
				}, {
					value: '已失效',
					key: '3'
				}],
				page: {
					searchCount: false,
					current: 1,
					size: 10,
					ascs: '',
					//升序字段
					descs: 'create_time',
					status: 0,
					isSpread: ''
				},
				parameter: {},
				loadmore: true,
				orderList: [],
				userInfo:{}
			};
		},

		components: {},

		onLoad(options) {
			this.tabCur1 = options.status1 ? Number(options.status1) : 0
			if (options.status2) {
				const obj = this.orderStatus2.filter(v => v.value == options.status2)
				this.tabCur2 = Number(obj[0].key)
			}
		},
		onShow() {
			app.initPage().then(res => {
				this.userInfo = uni.getStorageSync('user_info')
				this.refresh()
			});
		},

		onReachBottom() {
			if (this.loadmore) {
				this.page.current = this.page.current + 1;
				this.orderPage();
			}
		},

		onPullDownRefresh() {
			// 显示顶部刷新图标
			uni.showNavigationBarLoading();
			this.refresh(); // 隐藏导航栏加载框
			uni.hideNavigationBarLoading(); // 停止下拉动作
			uni.stopPullDownRefresh();
		},

		methods: {
			orderPage() {
				// 商城订单
				api.orderPage(Object.assign({userid:this.userInfo.id}, this.page, util.filterForm(this.parameter))).then(res => {
					let orderList = res.data.records;
					console.log(orderList, res.data)
					this.orderList = [...this.orderList, ...orderList];
					if (orderList.length < this.page.size) {
						this.loadmore = false;
					}
				})
			},
			refresh() {
				console.log(this.tabCur1, this.tabCur2, 'this.tabCur')
				switch (this.tabCur1) {
					case 1:
						this.page.isSpread = 1;
						break
					case 2:
						this.page.isSpread = 0;
						break
					default:
						delete this.page.isSpread
				}
				switch (this.tabCur2) {
					case 0:
						this.page.status = 1;
						this.page.isPay = 1
						break
					case 1:
						this.page.status = 3;
						this.page.isPay = 1
						break
					case 2:
						this.page.status = -1;
						this.page.isPay = 1
						break
					case 3:
						this.page.isPay = 0
						this.page.status = 4;
						break
					default:
						console.log(1111)
				}
				this.loadmore = true;
				this.orderList = [];
				this.page.current = 1;
				this.orderPage();
			},

			tabSelect1(item, i) {
				this.tabCur1 = i
				this.tabCur2 = 0
				this.refresh()
			},
			tabSelect2(item, i) {
				this.tabCur2 = i
				this.refresh()
			},
			// 跳转订单详情
			jumpInfo(item) {
				uni.navigateTo({
					url: '/pages/order/order-detail/index?id=' + item.id
				})
			}
		}
	};
</script>
<style scoped>
	.top_nav {
		background-image: linear-gradient(#FD8CA8, #FBBECE);
		color: #4E5969;
		padding: 30rpx 30rpx 20rpx;
		position: fixed;
		width: 100%;
		z-index: 9;
	}

	.top_nav .nav1 {
		display: flex;
		justify-content: space-between;
		background-color: #fff;
		height: 80rpx;
		border-radius: 15rpx;
		font-size: 30rpx;
	}

	.top_nav .nav1 .cu-item1 {
		height: 80rpx;
		line-height: 80rpx;
		padding: 0 20rpx;
	}

	.top_nav .nav1 .active1 {
		color: #FF001F;
	}

	.top_nav .nav2 {
		display: flex;
		justify-content: space-between;
		height: 80rpx;
		border-radius: 15rpx;
		font-size: 30rpx;
		padding: 10rpx 20rpx 0;
	}

	.top_nav .nav2 .cu-item2 {
		height: 70rpx;
		line-height: 70rpx;
	}

	.top_nav .nav2 .active2 {
		color: #FF001F;
		border-bottom: 6rpx solid #FF001F;
	}

	.order {
		padding: 0rpx 30rpx 0;
		margin-top: 207rpx;
		background-image: linear-gradient(#FBBECE, #F6F7F9 10%);
		color: #4E5969;
		font-size: 24rpx;
	}

	.order .order_info {
		background-color: #fff;
		padding: 20rpx;
		margin-bottom: 30rpx;
		border-radius: 15rpx;
	}

	.order .order_info .o_Img {
		width: 200rpx;
		height: 200rpx;
		margin-right: 20rpx;
	}

	.order .order_info .order_item {
		flex: 1;
		width: 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.order .order_info .order_item .order_status1 {
		background-image: linear-gradient(#FF7A2F, #FF001F);
		color: #fff;
		display: inline-block;
		padding: 10rpx 20rpx;
		border-radius: 100rpx;
	}

	.order .order_info .order_item .order_status2 {
		background-image: linear-gradient(#D2E1EB, #439AD7);
		color: #fff;
		display: inline-block;
		padding: 10rpx 20rpx;
		border-radius: 100rpx;
	}

	.order .order_info .order_item .order_status3 {
		background-image: linear-gradient(#C1C1C1, #606060);
		color: #fff;
		display: inline-block;
		padding: 10rpx 20rpx;
		border-radius: 100rpx;
	}

	.order .order_info .yBtn {
		background-color: #fff;
		border: 1rpx solid #C9CDD4;
		margin-left: 10rpx;
		padding: 0 10rpx;
		border-radius: 10rpx;
		height: 36rpx;
		line-height: 36rpx;
	}
</style>